<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>请登录</title>

    <link href="../plugin/sweetalert-6.6.2/sweetalert2.min.css" rel="stylesheet" type="text/css"/>
    <style>

        /* reset */
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            display: block;
        }

        ol, ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

        blockquote, q {
            quotes: none;
        }

        blockquote:before, blockquote:after, q:before, q:after {
            content: '';
            content: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* start editing from here */
        a {
            text-decoration: none;
        }

        .txt-rt {
            text-align: right;
        }

        /* text align right */
        .txt-lt {
            text-align: left;
        }

        /* text align left */
        .txt-center {
            text-align: center;
        }

        /* text align center */
        .float-rt {
            float: right;
        }

        /* float right */
        .float-lt {
            float: left;
        }

        /* float left */
        .clear {
            clear: both;
        }

        /* clear float */
        .pos-relative {
            position: relative;
        }

        /* Position Relative */
        .pos-absolute {
            position: absolute;
        }

        /* Position Absolute */
        .vertical-base {
            vertical-align: baseline;
        }

        /* vertical align baseline */
        .vertical-top {
            vertical-align: top;
        }

        /* vertical align top */
        nav.vertical ul li {
            display: block;
        }

        /* vertical menu */
        nav.horizontal ul li {
            display: inline-block;
        }

        /* horizontal menu */
        img {
            max-width: 100%;
        }

        /*end reset*/
        /****-----start-body----****/
        body {
            background: url(image/bg1.jpg) no-repeat 0px 0px;
            font-family: 'Open Sans', sans-serif;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            min-height: 1050px;
        }

        .wrap {
            margin: 0 auto;
            width: 80%;
        }

        body a, form li, input[type="submit"], input[type="text"], .sixth-login input[type="submit"], .third-login input[type="submit"] {
            transition: 0.1s all;
            -webkit-transition: 0.1s all;
            -moz-transition: 0.1s all;
            -o-transition: 0.1s all;
        }

        /*--close--*/
        .close {
            background: url('image/close.png') no-repeat 0px 0px;
            cursor: pointer;
            width: 20px;
            height: 20px;
            position: absolute;
            left: 20px;
            top: 20px;
            -webkit-transition: color 0.2s ease-in-out;
            -moz-transition: color 0.2s ease-in-out;
            -o-transition: color 0.2s ease-in-out;
            transition: color 0.2s ease-in-out;
        }

        /*--/close--*/
        h1 {
            font-family: 'Exo 2', sans-serif;
            text-align: center;
            padding-top: 4em;
            font-weight: 400;
            color: #2B2B36;
            font-size: 2em;
        }

        .login-form {
            background: #2b2b36;
            position: relative;
            width: 30%;
            margin: 3% auto 0 auto;
            text-align: center;
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -o-border-radius: 15px;
        }

        .head img {
            width: 100%;
        }

        .avtar img {
            margin: 2em 0 0;
        }

        .head-info {
            padding: 5px 0;
            text-align: center;
            font-weight: 600;
            font-size: 2em;
            color: #fff;
            background: #23232e;
            height: 50px;
            border-top-left-radius: 10px;
            -webkit-border-top-left-radius: 10px;
            -moz-border-top-left-radius: 10px;
            -o-border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -moz-border-top-right-radius: 10px;
            -o-border-top-right-radius: 10 p
        }

        input[type="text"] {
            width: 70%;
            padding: 1em 2em 1em 3em;
            color: #9199aa;
            font-size: 18px;
            outline: none;
            background: url(image/adm.png) no-repeat 10px 15px;
            border: none;
            font-weight: 100;
            border-bottom: 1px solid #484856;
            margin-top: 2em;
        }

        input[type="password"] {
            width: 70%;
            padding: 1em 2em 1em 3em;
            color: #dd3e3e;
            font-size: 18px;
            outline: none;
            background: url(image/email.png) no-repeat 10px 23px;
            border: none;
            font-weight: 100;
            border-bottom: 1px solid #484856;
            margin-bottom: 3em;
        }

        .email {
            background: url(image/pass.png) no-repeat 447px 17px;
        }

        input[type="submit"] {
            font-size: 30px;
            color: #fff;
            outline: none;
            border: none;
            background: #3ea751;
            width: 100%;
            padding: 18px 0;
            border-bottom-left-radius: 15px;
            -webkit-border-bottom-left-radius: 15px;
            -moz-border-bottom-left-radius: 15px;
            -o-border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            -webkit-border-bottom-right-radius: 15px;
            -moz-border-bottom-right-radius: 15px;
            -o-border-bottom-right-radius: 15px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background: #ff2775;
            border-bottom-left-radius: 15px;
            -webkit-border-bottom-left-radius: 15px;
            -moz-border-bottom-left-radius: 15px;
            -o-border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            -webkit-border-bottom-right-radius: 15px;
            -moz-border-bottom-right-radius: 15px;
            -o-border-bottom-right-radius: 15px;
            transition: 1s all;
            -webkit-transition: 1s all;
            -moz-transition: 1s all;
            -o-transition: 1s all;
        }

        label.lbl-1 {
            background: #6756ea;
            width: 20px;
            height: 20px;
            display: block;
            float: right;
            border-radius: 50%;
            margin: 16px 10px 0px 0px;
        }

        label.lbl-2 {
            background: #ea569a;
            width: 20px;
            height: 20px;
            display: block;
            float: right;
            border-radius: 50%;
            margin: 16px 10px 0px 0px;
        }

        label.lbl-3 {
            background: #f1c85f;
            width: 20px;
            height: 20px;
            display: block;
            float: right;
            border-radius: 50%;
            margin: 16px 10px 0px 0px;
        }

        /*--copyrights--*/
        .copy-rights {
            text-align: center;
            margin-top: 8em;
        }

        .copy-rights p {
            color: #FFF;
            font-size: 1em;
            line-height: 1.8em;
        }

        .copy-rights p a {
            color: #ff2a75;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
            text-decoration: none;
        }

        .copy-rights p a:hover {
            color: #3faa53;
            text-decoration: none;
            transition: 0.1s all;
            -webkit-transition: 0.1s all;
            -moz-transition: 0.1s all;
            -o-transition: 0.1s all;
        }

        /*--/copyrights--*/
        /*--start-responsive-design--*/
        @media (max-width: 1440px) {
            .email {
                background: url(image/pass.png) no-repeat 376px 17px;
            }

            body {
                min-height: 811px;
            }
        }

        @media (max-width: 1366px) {
            .email {
                background: url(image/pass.png) no-repeat 358px 19px;
            }

            .copy-rights {
                margin-top: 3em;
            }

            body {
                min-height: 768px;
            }
        }

        @media (max-width: 1280px) {
            .email {
                background: url(image/pass.png) no-repeat 336px 18px;
            }

            body {
                min-height: 711px;
            }

            .copy-rights {
                margin-top: 0.5em;
            }
        }

        @media (max-width: 1024px) {
            .login-form {
                width: 37%;
            }

            .email {
                background: url(image/pass.png) no-repeat 339px 18px;
            }

            .copy-rights {
                margin-top: 3em;
            }

            h1 {
                padding-top: 2em;
            }

            body {
                min-height: 675px;
            }
        }

        @media (max-width: 768px) {
            .login-form {
                width: 50%;
                margin: 12% auto 0 auto;
            }

            .email {
                background: url(image/pass.png) no-repeat 342px 18px;
            }

            body {
                min-height: 929px;
            }
        }

        @media (max-width: 640px) {
            .login-form {
                width: 60%;
                margin: 20% auto 0 auto;
            }

            .email {
                background: url(image/pass.png) no-repeat 342px 19px;
            }
        }

        @media (max-width: 480px) {
            .login-form {
                width: 80%;
            }
        }

        @media (max-width: 320px) {
            h1 {
                padding-top: 1em;
                font-size: 1.5em;
            }

            .login-form {
                width: 90%;
                margin: 10% auto 0 auto;
            }

            input[type="text"] {
                width: 62%;
                padding: 1.2em 2em .5em 2.5em;
                font-size: 17px;
                margin-top: .5em;
            }

            input[type="password"] {
                width: 62%;
                padding: 1.2em 2em .5em 2.5em;
                font-size: 17px;
                margin-top: .5em;
                margin-bottom: 2em;
                background: url(image/email.png) no-repeat 8px 23px;
            }

            .email {
                background: url(image/pass.png) no-repeat 235px 27px;
            }

            .avtar img {
                margin: 1.1em 0 0;
            }

            .head-info {
                height: 35px;
            }

            label.lbl-1 {
                margin: 8px 10px 0px 0px;
            }

            label.lbl-2 {
                margin: 8px 10px 0px 0px;
            }

            label.lbl-3 {
                margin: 8px 10px 0px 0px;
            }

            .close {
                left: 16px;
                top: 13px;
            }

            .copy-rights {
                margin-top: 2em;
            }

            body {
                min-height: 504px;
            }

            input[type="submit"] {
                font-size: 28px;
                padding: 10px 0;
            }
        }

        /*--end-responsive-design--*/
    </style>

</head>
<body onkeydown="key_login();">
<h1 onclick="show()">请登录</h1>
<div class="login-form">
    <div class="close" onclick="hide()"></div>
    <div class="head-info">
        <label class="lbl-1"> </label> <label class="lbl-2"> </label> <label class="lbl-3"> </label>
    </div>
    <div class="clear"></div>
    <div class="avtar">
        <img src="image/avtar.png"/>
    </div>
    <form>
        <input type="text" class="text" placeholder="请输入用户名" id="login_staff_username">
        <div class="email">
            <input type="password" placeholder="请输入密码" id="login_staff_password">
        </div>
    </form>
    <div class="signin">
        <input id="form_login" type="submit" verify="登录" onclick="toLogin()">
    </div>
</div>
</body>
<script src='../plugin/jquery-3.2.1/jquery-3.2.1.min.js'></script>
<script src='../plugin/sweetalert-6.6.2/sweetalert2.min.js'></script>
<script src='../plugin/soul/utils.js'></script>
<script src='../base/base.js'></script>
<script>
    if (window.top !== window.self) {
        window.top.location = window.location;
    }

    function key_login() {
        if (event.keyCode == 13) {//回车键的键值为13
            // event.returnValue = false;
            // window.event.returnValue= false;
            // event.cancel = true;
            // toLogin();
            // return false;
            $("#form_login").click(); //调用登录按钮的登录事件
        }
    }

    function hide() {
        $('.login-form').hide();
    }

    function show() {
        $('.login-form').show();
    }

    //去登录
    function toLogin() {
        // 判断空
        var username = $("#login_staff_username").val();
        if (username == "") {
            SwalUtil.error('请输入用户名');
            return;
        }
        var password = $("#login_staff_password").val();
        if (password == "") {
            SwalUtil.error('请输入密码');
            return;
        }

        var resp = AjaxUtil.postJson("staff/login", {
            username: username,
            password: password
        });
        if (resp) {
            window.localStorage.token = resp.obj.token;
            SwalUtil.success('登录成功,正在跳转...');
            setTimeout(function () {
                // 延时2s后执行
                window.location.href = 'index.html';
            }, 2000);
        }
        return false;
    }
</script>
</html>